<script setup>
import { onMounted, onUnmounted, ref, watch } from "vue";

//example components
import NavbarDefault from "@/examples/navbars/NavbarDefault.vue";
import DefaultFooter from "@/examples/footers/FooterDefault.vue";
import Header from "@/examples/Header.vue";
import MaterialButton from "@/components/MaterialButton.vue";
import AllTires from "@/views/components/AllTires.vue";
import BadLands from "./Components/detail/BadLands.vue";
import Hightlight from "./Components/detail/Hightlight.vue";
import PVideo from "./Components/detail/PVideo.vue";
import SizeAndSpeces from "./Components/detail/SizeAndSpeces.vue";
//images
import vueMkHeader from "@/assets/img/products/detail/header-bg.png";

import { useRouter } from "vue-router";

import { fileLinkToStreamDownload } from "@/utils";

import { goodsInfo } from "@/api/tires";
let menuType = ref(1);
let curList = ref([]);
let labelValue = ref(true);
let curProductId = ref("");
let goodItem = ref({});
const router = useRouter();
//hooks
const body = document.getElementsByTagName("body")[0];

watch(
    () => router.currentRoute.value.query.id,
    (newRouterName) => {
        curProductId.value = newRouterName;
        newRouterName &&
            goodsInfo(newRouterName).then((res) => {
                goodItem.value = res.data;
            });
    },
    { immediate: true }
);
const changeMenu = (type) => {
    menuType.value = type;
};
const changeLabel = () => {
    labelValue.value = !labelValue.value;
};
const dosth = (val) => {
    labelValue.value = !labelValue.value;
    curProductId.value = val;
};
const scrollIntoView = () => {
    document.getElementById("Position0").scrollIntoView({ behavior: "smooth" });
};

onMounted(() => {
    body.classList.add("presentation-page");
    body.classList.add("bg-gray-200");
});
onUnmounted(() => {
    body.classList.remove("presentation-page");
    body.classList.remove("bg-gray-200");
});
</script>

<template>
    <div class="position-sticky z-index-sticky top-0 w-100">
        <NavbarDefault transparent />
    </div>
    <Header>
        <div class="page-header min-vh-75" :style="`background-image: url(${goodItem.tiresBigPic})`" loading="lazy">
            <div class="container">
                <div class="row text-center">
                    <div class="col-lg-12">
                        <h1 class="text-f-ERASBD text-white text-title-size ignore">
                            {{ goodItem.productName }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </Header>
    <BadLands :productPic="goodItem.productPic || ''" :name="goodItem.productName" :detail="goodItem.tiresDesc" :iconLeft="goodItem.iconLeft" :iconRight="goodItem.iconRight" @scrollIntoView="scrollIntoView" />
    <Hightlight :image="goodItem.detailPic" />
    <PVideo :images="goodItem.tiresSmallPic" />
    <SizeAndSpeces id="Position0" :name="goodItem.productName" :images="goodItem.tiresData" :tiresType="goodItem.tiresType" />
    <AllTires />
    <!-- <DefaultFooter /> -->
</template>
<style scoped>
@media (max-width: 991.98px) {
    .min-vh-75 {
        min-height: 50vh !important;
    }
}
</style>
